<template>
  <el-dialog
      :title="title"
      append-to-body
      destroy-on-close
      :model-value="showDialog"
      @close="closeDialog()"
  >
    <!-- 表单 -->
    <el-form
        :model="form"
        ref="formRef"
        :rules="rules"
        label-width="80px"
        :inline="false"
    >

      <el-form-item label="文件数据" prop="data">
        <el-upload
            name="data"
            :multiple="false"
            :show-file-list="true"
            :on-change="onChange"
            limit="1"
            v-model="data"
            placeholder=""
            clearable
            :auto-upload="false"
        >
          <!--                    <el-button size="medium" type="primary">上传文件</el-button>-->
          <div style="padding: 10px 0">
            <Icon
                type="ios-cloud-upload"
                size="52"
            ></Icon>
            <p style="margin-top: 10px; font-size: 14px">
              点击或拖拽文件至此即可上传文件
            </p>
            <p
                style="
                                margin-top: 20px;
                                font-size: 14px;
                                color: red;
                            "
            >
              请上传10GB以内的待测对象
            </p>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>


    <template v-slot:footer>
            <span>
                <el-button @click="closeDialog()">取消</el-button>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
            </span>
    </template>
  </el-dialog>
</template>
<script>

</script>
<script setup>
import { reactive, toRefs, onMounted, ref,defineProps, defineEmits } from "vue";


const props = defineProps({
  showDialog: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: "添加",
  },
  rowData: {
    type: Object,
    default: null,
  },
});
const emit = defineEmits(["closeDialog"]);
const { title } = toRefs(props);
const closeDialog = () => {
  emit("closeDialog", false);
};

const rules = {
  data: [
    {
      required: true,
      message: "请上传文件",
      trigger: "blur",
    },
  ],
};

const formRef = ref(null);
const form = reactive({
  data: [],
});
const { data } = toRefs(form);

onMounted(async () => {

});

/**
 * 计算文件大小
 * @param fileSize
 * @returns {string}
 */
const formatFileSize = (fileSize) => {
  if (fileSize < 1024) {
    return fileSize + "B";
  } else if (fileSize < 1024 * 1024) {
    let temp = fileSize / 1024;
    temp = temp.toFixed(2);
    return temp + "KB";
  } else if (fileSize < 1024 * 1024 * 1024) {
    let temp = fileSize / (1024 * 1024);
    temp = temp.toFixed(2);
    return temp + "MB";
  } else {
    let temp = fileSize / (1024 * 1024 * 1024);
    temp = temp.toFixed(2);
    return temp + "GB";
  }
};
/**
 * 文件更改
 * */
const onChange = (file) => {
  var name = file.name;
  var size = file.size;
  form.name = name;
  form.uid = file.uid;
  if (size != null) {
    form.length = formatFileSize(size);
  }

  form.data = file.raw;
  if (name !== null) {
    var split = name.split(".");
    form.type = split[split.length - 1];
  }
};
/**
 * @description:提交
 * @param {*}
 * @return {*}
 */
const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let fd = new FormData();
      fd.append("multipartFile", form.data); //传文件
      let res = await VE_API.#{Module}Api.#{module}ImportExcel(fd);
      const { code } = res;
      if (code === 0) {
        console.log(code);
        closeDialog();
      }
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
</script>

<style lang="scss" scoped></style>
